*
{
    padding: 0;
    margin: 0;
}
div, p, h1, h2, a, span
{
    font-family: Arial;
    font-weight: bold;
}
header
{
    /*padding-top: 16px;*/
    padding-top: 0.5rem;
}
h1
{
    /*font-size: 40px;*/
    font-size:1.8rem;
    font-weight: bold;
    text-align: center;
}
#gamePanel
{
    margin: 0 auto;
    /*width: 500px;*/
    width: 12.5rem;
    position: relative;
}
#gridPanel
{
    /*width: 480px;*/
    /*height: 480px;*/
    width: 12rem;
    height:12rem;
    background: #BBADA0;
    /*border-radius: 10px;*/
    border-radius: 0.25rem;
    /*padding: 20px 0 0 20px;*/
    padding: 0.5rem 0 0 0.5rem;
    position: relative;
}
#gamePanel p
{
    /*padding: 8px;*/
    padding:1rem;
    font-size: 0.8rem;
}
/* ��ť��ʽ */
.button
{
    display: inline-block;
    /*padding: 10px;*/
    padding:0.25rem;
    background: #9F8B77;
    /*border-radius: 6px;*/
    border-radius:0.15rem;
    color: #FFF;
    cursor: pointer;
}
.grid, .cell
{
    /*width: 100px;*/
    /*height: 100px;*/
    /*border-radius: 6px;*/
    width:2.5rem;
    height:2.5rem;
    border-radius:0.15rem;
}
/* �������� */
#gamePanel .grid
{
    background-color: #ccc0b3;
    float: left;
    /*margin: 0 20px 20px 0;*/
    margin: 0 0.5rem 0.5rem 0;
}
/* ��ʽ��ǰ����Ԫ����λ�� */
.cell
{
    position: absolute;
    /*line-height: 100px;*/
    line-height:2.5rem;
    vertical-align: middle;
    text-align: center;
    /*font-size: 60px;*/
    font-size:1.5rem;
    color: #776E65;
}
/* ǰ�����е���λ�� */
#cell00, #cell01, #cell02, #cell03
{
    /*top: 20px;*/
    top: 0.5rem;
}
#cell10, #cell11, #cell12, #cell13
{
    /*top: 140px;*/
    top:3.5rem;
}
#cell20, #cell21, #cell22, #cell23
{
    /*top: 260px;*/
    top: 6.5rem;
}
#cell30, #cell31, #cell32, #cell33
{
    /*top: 380px;*/
    top:9.5rem;
}
/* ǰ�����е���λ�� */
#cell00, #cell10, #cell20, #cell30
{
    /*left: 20px;*/
    left: 0.5rem;
}
#cell01, #cell11, #cell21, #cell31
{
    /*left: 140px;*/
    left:3.5rem;
}
#cell02, #cell12, #cell22, #cell32
{
    /*left: 260px;*/
    left:6.5rem;
}
#cell03, #cell13, #cell23, #cell33
{
    /*left: 380px;*/
    left:9.5rem;
}
/* ������ʾЧ�� */
.num8, .num16, .num32, .num64, .num128, .num256, .num512, .num1024, .num2048, .num4096, .num8192
{
    color: #fff;
}
.num1024, .num2048, .num4096, .num8192
{
    /*font-size: 40px;*/
    font-size:0.9rem;
}
.num2
{
    background: #eee4da;
}
.num4
{
    background: #ede0c8;
}
.num8
{
    background: #f2b179;
}
.num16
{
    background: #f59563;
}
.num32
{
    background: #f67c5f;
}
.num64
{
    background: #f65e3b;
}
.num128
{
    background: #edcf72;
}
.num256
{
    background: #edcc61;
}
.num512
{
    background: #9c0;
}
.num1024
{
    background: #33b5e5;
}
.num2048
{
    background: #09c;
}
.num4096
{
    background: #a6c;
}
.num8192
{
    background: #93c;
}
/* ��ʽ��Game Over����ʽ */
#gameOver
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#gameOver div
{
    width: 100%;
    height: 100%;
    background: #555;
    opacity: 0.5;
}
#gameOver p
{
    position: absolute;
    /*top: 150px;*/
    /*left: 100px;*/
    /*border-radius: 10px;*/
    /*width: 300px;*/
    top:3.75rem;
    left: 2.5rem;
    border-radius:0.25rem;
    width:7.5rem;
    border:0.05rem solid #EDCF72;
    background: #fff;
    line-height: 1.6em;
    /*font-size: 30px;*/
    font-size:0.8rem;
    color: #000;
    text-align: center;
}

/*������ť*/
#control 
{
    position:fixed;
    /*left:20px;*/
    /*top:20px;*/
    left:0.5rem;
    top:0.5rem;
}
#control input
{
    font-size:15pt;
    /*padding: 10px;*/
    padding: 0.25rem;
    background: #9F8B77;
    /*border-radius: 6px;*/
    border-radius:0.15rem;
    color: #FFF;
    display:block;
    /*width:70px;*/
    width:1.75rem;
}
